<template>
  <div class="setting-r-content" style="overflow-y:auto;">
    <Row class="setting-r-c_params">
      <Col span="24" class="col_1">
      <Icon style="font-size:20px;" type="md-reorder" />
      <h2>企业渠道</h2>
      </Col>
      <Col span="24" class="col_2">
      <div class="button_add">
        <Button size="small" @click="handleNewBuild">新增</Button>
      </div>
      <div class="table_list">
        <Table :columns="columns" :loading="loading" :data="tableData" border />
      </div>
      </Col>
      <Modal v-model="dialogVisible" title="新增渠道名称">
        <Form :model="addForm" :label-width="100" ref="refAdd" :rules="rules">
          <FormItem label="渠道名称：" prop="name">
            <Input v-model="addForm.name" placeholder="请输入类型名称..." style="width:80%;" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="dialogVisible=false;">取消</Button>
          <Button :loading="btnDisabled" type="primary" @click="handleSubmit">
            <span v-if="!btnDisabled">确认</span>
            <span v-else>保存中</span>
          </Button>
        </div>
      </Modal>
    </Row>
  </div>
</template>
<script>
import {
  addCompanyChannel,
  getCompanyChannel,
  deleteCompanyChannel
} from '@/api'

export default {
  data() {
    const vm = this
    return {
      columns: [
        {
          title: '渠道名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            const { row } = params
            return h('div', [
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true,
                    cancelText: '取消'
                  },
                  on: {
                    'on-ok': () => vm.handleDelete(row.id)
                  }
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        marginRight: '5px'
                      },
                      props: {
                        type: 'error',
                        size: 'small'
                      }
                    },
                    '删除'
                  )
                ]
              )
            ])
          }
        }
      ],
      tableData: [],
      loading: false,
      dialogVisible: false,
      btnDisabled: false,
      rules: {
        name: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入渠道名称'
          }
        ]
      },
      addForm: {
        name: ''
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.loading = true
      const params = {}
      const { code, data } = await getCompanyChannel()
      if (code !== 200) return
      this.tableData = data
      this.loading = false
    },

    handleNewBuild() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.refAdd.resetFields()
        this.addForm.name = ''
      })
    },

    handleSubmit() {
      const { name } = this.addForm
      this.btnDisabled = true
      this.$nextTick(() => {
        this.$refs.refAdd.validate(valid => {
          if (valid) {
            const params = { name }
            addCompanyChannel(params).then(res => {
              if (res.code === 200) {
                this.dialogVisible = false
                this.btnDisabled = false
                this.init()
              }
            })
          } else {
            this.btnDisabled = false
          }
        })
      })
    },

    handleDelete(id) {
      deleteCompanyChannel(id).then(res => {
        const { code } = res
        if (code === 200) {
          this.init()
        }
      })
    }
  }
}
</script>
